<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				padding: 0px;
				margin: 0px;
			}
			.box{
				position: relative;
				width: 100%;
				height: 775px;
				background-color: #e5e5e5;
			}
			.goods{
				position: absolute;
				width: 230px;
				height: 322px;
				background-color: white;
				left: 50px;
				top: 50px;
				text-align: left;
				line-height: 10px;
				vertical-align: middle;
			}
			.body img{
				margin-top: 30px;
				height: 150px;
				width: 150px;
				margin-left: 40px;
			}
			.body .p1{
				margin-top: 50px;
				font-size: 14px;
				color: #666;
				padding-left: 15px;
				padding-right: 15px;
			}
			.body .p2{
				padding-left: 15px;
				color: red;
				font-size: 20px;
			}
			.but{
				color: white;
				font-size: 14px;
				width: 122px;
				height: 33px;
				border-radius: 50px;
				position: absolute;
				top: 270px;
				left: 50px;
				background-color: #333333;
				text-align: center;
				line-height: 33px;
				vertical-align: middle;
				display: none;
			}
			.but img{
				height: 10px;
				width: 16px;
			}
			.gb{
				text-align: center;
				line-height: 16px;
				vertical-align: middle;
				border-radius: 50%;
				height: 16px;
				width: 16px;
				font-size: 14px;
				color: #666;
				position: absolute;
				top: 7px;
				right: 10px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="goods">
				<div class="gb">×</div>
			<div class="body">
				<img src="img/img1.webp" >
				<p class="p1">利郎男鞋2019春夏新款休闲板<br><br><span class="span1">鞋百搭潮流小白鞋男 白色 40</span></p>
				<p class="p2">￥299.0</p>
			</div>
			<div class="but"><img src="img/小眼睛.png" >&nbsp;&nbsp;查看相似</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				function $(selector) {
					return document.querySelector(selector)
				}
				var box=$(".box")
				var but = $(".but");
				var goods=$(".goods");
				var p2 = $(".p2");
				var span1 = $(".span1")
				var gb = $(".gb")
				but.onmousemove=function(){
					but.style.backgroundColor="red";
				}
				but.onmouseout=function(){
					but.style.backgroundColor="#333333";
				}
				goods.onmousemove=function(){
					but.style.display="inline";
					p2.style.display="none";
					span1.style.opacity="0.3";
					box.style.opacity="0.8";
					gb.style.display="inline";
				}
				goods.onmouseout=function(){
					but.style.display="none";
					p2.style.display="inline";
					span1.style.opacity="1";
					box.style.opacity="1";
					gb.style.display="none";
				}
				gb.onmousemove=function(){
					gb.style.color="white";
					gb.style.backgroundColor="red";
				}
				gb.onmouseout=function(){
					gb.style.color="#666";
					gb.style.backgroundColor="white";
				}
			}
		</script>
	</body>
</html>
